<template>
	<!-- 235 -->
	<view class="cotainer">
		<!-- <view class="box">
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item, slideIndex) in officeList" :key="slideIndex">
					<image class="swiperImage" :src="item.officeImage" />
				</swiper-item>
			</swiper>
		</view> -->

		<!-- <view class="item-description">
			<view class="item-img">
				<image :src="list.officeImage" mode="widthFix"></image>
				<view class="description-text">{{list.officeIntroduce}}</view>
			</view>

			<view class="item-name">{{list.officeName}}</view>
			<view class="item-quantity">库存剩余: {{list.officeQuantity}}
				<button class="apply-button" @click="application(list.officeId)">领用</button>
			</view>
		</view>
		<view class="description">商品介绍</view> -->

		<view class="item-description">
			<view class="item-img">
				<image :src="list.officeImage" mode="widthFix" class="item-image"></image>
				<view class="item-name">{{list.officeName}}</view>
			</view>
			<view class="item-quantity">库存剩余: {{list.officeQuantity}}</view>
			<button class="apply-button" @click="application(list.officeId)">领用</button>
		</view>
		<view class="description">商品介绍</view>
		<!-- <image :src="list.officeImage" mode="widthFix" class="item-image"></image> -->
		<view class="item-introduce-wrap">
			<!-- <image :src="list.officeImage" mode="widthFix"></image> -->
			<view class="description-text">{{list.officeIntroduce}}</view>
		</view>

	</view>
</template>

<script>
	import {
		listOffice,
		getOffice
	} from '@/api/system/office'
	const config = require('@/config.js')
	export default {
		data() {
			return {
				officeId: 0,
				list: {},
				officeList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					officeName: null,
					officeQuantity: null,
					officeImage: null,
					officeIntroduce: null
				},
			};
		},
		methods: {
			application(officeId) {
				// this.$tab.navigateTo(`/pages/work/application?id=${id}`);
				this.$tab.navigateTo(`/pages/work/application?id=${officeId}`);
			},
			getOfficeParams() {
				listOffice(this.getOfficeParams).then(response => {
						console.log(response.rows);
						this.officeList = response.rows;
						this.officeList.forEach(item => {
							item.officeImage = config.baseUrl + item.officeImage

						})

					}),
					getOffice(this.officeId).then(response => {
						console.log(response.data);
						console.log('Received data:', response.data);
						this.list = response.data;
						this.list.officeImage = config.baseUrl + response.data.officeImage

					})
			}

		},
		onLoad(option) {
			this.officeId = option.id;
		},
		created() {
			this.getOfficeParams();

		}
	}
</script>

<style>
	.cotainer {
		margin: 0 auto;
		padding: 2rem;
	}

	.item-description {
		display: flex;
		flex-direction: column;
		align-items: center;

	}


	.apply-button {
		width: 20%;
		height: 20%;

		background-color: #007bff;
		color: #ffffff;
		border-radius: 4px;
		font-size: 16px;
		text-align: center;
		line-height: 28px;
		margin-top: -40px;
		margin-right: 1rem;


	}


	.item-quantity {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 18px;
		height: 50px;
		line-height: 50px;
		margin-top: 20px;

		margin-left: -245px;
		padding: 10px 0;


	}

	.item-image {
		width: 120%;
		position: relative;
		display: inline-block;
		border-radius: 5%;

		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}

	.item-image::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
		z-index: -1;
		border-radius: 50%;
		filter: blur(5px);
	}

	/*  */

	/* .item-img1 {
		display: block;
		width: 100%;
	} */




	.item-name {
		font-weight: bold;
		font-size: 1.2rem;
		margin-top: 25px;
		/* margin-bottom: 1px; */
		margin-left: -5px;

	}

	.description-text {
		padding: 10px 0;
		color: black;
		text-align: justify;
		line-height: 1.5;
		padding: 1rem;
		font-size: 1rem;
		margin-top: -1px;
		margin-left: -25px;

	}

	.item-image {
		margin-top: -4px;
	}

	.description {
		margin-top: 30px;
		font-size: 20px;
		margin-left: -10px;
	}

	.item-introduce-wrap {
		position: relative;
		display: inline-block;

	}
</style>